<!-- 钢琴琴键主区域 -->
<template>
  <div class="main-content">
    <!-- 小字组 -->
    <PianoGroup 
      :white-width="46"
      :black-width="40"
      :mapping="[
        'C3', '#C3', 'D3', '#D3', 'E3', 'F3',
        '#F3', 'G3', '#G3', 'A3', '#A3', 'B3',
      ]"
      :major="major"
      :index="0"
    />
    <!-- 小字一组 -->
    <PianoGroup
      :white-width="46"
      :black-width="40"
      :mapping="[
        'C4', '#C4', 'D4', '#D4', 'E4', 'F4',
        '#F4', 'G4', '#G4', 'A4', '#A4', 'B4',
      ]"
      :major="major"
      :index="1"
    />
    <!-- 小字二组 -->
    <PianoGroup
      :white-width="46"
      :black-width="40"
      :mapping="[
        'C5', '#C5', 'D5', '#D5', 'E5', 'F5',
        '#F5', 'G5', '#G5', 'A5', '#A5', 'B5',
      ]"
      :major="major"
      :index="2"
    />
  </div>
</template>


<script setup lang="ts">
  import PianoGroup from '@/components/PianoGroup.vue';
  import { inject } from 'vue';
  import { MAJOR_KEY } from '@/types/types';

  const major = inject(MAJOR_KEY)!;         // 调式
</script>

<style lang="scss" scoped>
  .main-content {
    display: flex;
    flex: 1;
    align-items: center;
    gap: #{calc(var(--gap) * 1px)};
    justify-content: center;
  }
</style>